<template>
  <div style=" position:relative;width:700px" id="drawCoupon">
    <Table  width="100%" :columns="columns" :data="value">
      <template slot-scope="{ row }" slot="couponType">
        {{ getEnumsName(row.refType, couponTypeList) }}
      </template>
      <template slot-scope="{ row }" slot="validTime">
        {{ row.expirationType ? (row.startTime + '至' + row.endTime) : (row.dayNum + '天') }}
      </template>
      <template slot-scope="{ row }" slot="channel">
        {{ row.channel | getChannelsName }}
      </template>
      <template slot-scope="{ row }" slot="hitRate">
        <Input v-model="row.hitRate" :maxlength="3" @on-keyup="filterRate(row)" @on-blur="filterRate(row)" @on-change="handleRate(row)"></Input>
      </template>
    </Table>
    <Icon type="ios-add-circle" size="24" color="#2D8CF0" class="coupon-addicon" @click= "showDrawer" />
    <div>
    <Icon type="md-trash" size="24"  color="#808695" class="coupon-removeicon" @click="removeItem(index)" v-for="(item, index) in value.length" :key="index" :style="{'top': (2 + 48 * (index + 1)) + 'px'}" />
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import enumsMixin from '@/view/market/enums.js'
let that
export default {
  name: 'SelectRedpack',
  mixins: [enumsMixin],
  data () {
    return {
      couponName: '',
      searchObj: {
        couponName: '',
        couponType: -1
      },
      columns: [
        {
          title: '优惠券名称',
          width: 160,
          key: 'refName'
        },
        {
          title: '类型',
          slot: 'couponType'
        },
        {
          title: '有效期',
          width: 160,
          slot: 'validTime'
        },
        {
          title: '可用渠道',
          slot: 'channel'
        },
        {
          title: '获得概率(%)',
          width: 140,
          slot: 'hitRate'
        }
      ]
    }
  },
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId
    })
  },
  beforeCreate: function () {
    that = this
  },
  filters: {
    getChannelsName (value) {
      if (value) {
        return value.map((value) => {
          const result = that.channelList.filter(item => +item['value'] === +value)
          return result[0] ? result[0]['label'] : ''
        }).join(',')
      }
      return ''
    }
  },
  watch: {
    value (val) {
      this.data = JSON.parse(JSON.stringify(val))
    }
  },
  mounted () {
  },
  methods: {
    showDrawer () {
      this.$emit('addcoupon', true)
    },
    removeItem (index) {
      let newVal = this.value.filter((item, i) => i !== index)
      this.$emit('input', newVal)
    },
    handleRate (row) {
      this.data[row._index].hitRate = row.hitRate
      this.$emit('input', this.data)
    },
    filterRate (row) {
      let val = row.hitRate
      val = val.replace(/[^0-9]/g, '')
      if (val.length >= 1 && val.substring(0, 1) === '0') {
        val = ''
      }
      if (val.length === 3 && val > 100) {
        val = val.substring(0, 2)
      }
      this.data[row._index].hitRate = val
      this.$emit('input', this.data)
    }
  }
}
</script>
<style>
#drawCoupon .ivu-table-cell {line-height: 1.5;}
</style>
<style lang='less' scoped>
  .coupon-addicon{ position:absolute;  right:-70px; top:50px; cursor: pointer; }
  .coupon-removeicon{ position:absolute; right:-40px; cursor: pointer;}
</style>
